
/* 文本组件 - HarmonyOS设计指南实现 */
@import "../base/font.less";
@import "../base/color.less";

/* 文本变量 */
:root {
  --text-line-height: 1.5;
  --text-letter-spacing: 0;
  --text-selection-color: var(--color-brand10);
}

/* 文本基础样式 */
.text {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
  color: var(--color-font-primary);
  line-height: var(--text-line-height);
  letter-spacing: var(--text-letter-spacing);
  text-decoration: none;
  text-align: left;

  /* 文本选中样式 */
  &::selection {
    background-color: var(--text-selection-color);
  }

  &::-moz-selection {
    background-color: var(--text-selection-color);
  }
}

/* 文本颜色变体 */
.text-primary,
.text.primary {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
  color: var(--color-font-primary);
}

.text-secondary,
.text.secondary {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
  color: var(--color-font-secondary);
}

.text-tertiary,
.text.tertiary {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
  color: var(--color-font-tertiary);
}

.text-fourth,
.text.fourth {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
  color: var(--color-font-fourth);
}

.text-emphasize,
.text.emphasize {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
  color: var(--color-font-emphasize);
}

/* 文本在不同背景上的颜色 */
.text-on,
.text.on,
.text-on-primary,
.text-on.primary,
.text-primary.on,
.text.primary.on {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
  color: var(--color-font-on-primary);
}

.text-on-secondary,
.text-on.secondary,
.text-secondary.on,
.text.secondary.on {
  &:extend(.font-body);
  color: var(--color-font-on-secondary);
}

.text-on-tertiary,
.text-on.tertiary,
.text-tertiary.on,
.text.tertiary.on {
  &:extend(.font-body);
  color: var(--color-font-on-tertiary);
}

.text-on-fourth,
.text-on.fourth,
.text-fourth.on,
.text.fourth.on {
  &:extend(.font-body);
  color: var(--color-font-on-fourth);
}

.text-on-emphasize,
.text-on.emphasize,
.text-emphasize.on,
.text.emphasize.on {
  &:extend(.font-body);
  color: var(--color-font-on-primary);
}

/* 文本大小变体 */
.text-display,
.text.display {
  font-size: var(--font-size-display-medium);
  font-weight: var(--font-weight-display);
}

.text-title,
.text.title {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-title);
}

.text-title-sub,
.text.title-sub,
.text.sub-title {
  font-size: var(--font-size-title-sub-medium);
  font-weight: var(--font-weight-title-sub);
}

.text-body,
.text.body {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
}

.text-caption,
.text.caption {
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-caption);
}

/* 文本粗细变体 */
.text-bold,
.text.bold {
  font-weight: var(--font-weight-bold);
}

.text-light,
.text.light {
  font-weight: var(--font-weight-light);
}

.text-medium,
.text.medium {
  font-weight: var(--font-weight-medium);
}

.text-regular,
.text.regular {
  font-weight: var(--font-weight-regular);
}

/* 文本样式变体 */
.text-italic,
.text.italic {
  font-style: italic;
}

/* 文本对齐方式 */
.text-left,
.text.left {
  text-align: left;
}

.text-center,
.text.center {
  text-align: center;
}

.text-right,
.text.right {
  text-align: right;
}

.text-justify,
.text.justify {
  text-align: justify;
}

/* 文本装饰线 */
.text-underline,
.text.underline {
  text-decoration: underline;
}

.text-overline,
.text.overline {
  text-decoration: overline;
}

.text-line-through,
.text.line-through {
  text-decoration: line-through;
}

/* 文本溢出处理 */
.text-ellipsis,
.text.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2,
.text.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-ellipsis-3,
.text.ellipsis-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 文本大小写转换 */
.text-lowercase,
.text.lowercase {
  text-transform: lowercase;
}

.text-uppercase,
.text.uppercase {
  text-transform: uppercase;
}

.text-capitalize,
.text.capitalize {
  text-transform: capitalize;
}

/* 行高变体 */
.text-line-height-1,
.text.line-height-1 {
  line-height: 1;
}

.text-line-height-1_2,
.text.line-height-1_2 {
  line-height: 1.2;
}

.text-line-height-1_4,
.text.line-height-1_4 {
  line-height: 1.4;
}

.text-line-height-1_6,
.text.line-height-1_6 {
  line-height: 1.6;
}

.text-line-height-1_8,
.text.line-height-1_8 {
  line-height: 1.8;
}

/* 字符间距变体 */
.text-letter-spacing-sm,
.text.letter-spacing-sm {
  letter-spacing: 1px;
}

.text-letter-spacing-md,
.text.letter-spacing-md {
  letter-spacing: 2px;
}

.text-letter-spacing-lg,
.text.letter-spacing-lg {
  letter-spacing: 4px;
}

/* 文本基线偏移 */
.text-baseline-offset-sm,
.text.baseline-offset-sm {
  position: relative;
  bottom: 2px;
}

.text-baseline-offset-md,
.text.baseline-offset-md {
  position: relative;
  bottom: 4px;
}

.text-baseline-offset-lg,
.text.baseline-offset-lg {
  position: relative;
  bottom: 6px;
}

.text-baseline-offset-top-sm,
.text.baseline-offset-top-sm {
  position: relative;
  top: 2px;
}

.text-baseline-offset-top-md,
.text-baseline-offset-top-md {
  position: relative;
  top: 4px;
}

.text-baseline-offset-top-lg,
.text-baseline-offset-top-lg {
  position: relative;
  top: 6px;
}

/* 可复制文本 */
.text-copyable,
.text.copyable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
}

/* 不可选择文本 */
.text-unselectable,
.text.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

/* 文本截断（单行） */
.text-truncate,
.text.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文本换行 */
.text-break,
.text.break {
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 文本不换行 */
.text-nowrap,
.text.nowrap {
  white-space: nowrap;
}

/* 文本预格式化 */
.text-pre,
.text.pre {
  white-space: pre;
}

.text-pre-wrap,
.text.pre-wrap {
  white-space: pre-wrap;
}

.text-pre-line,
.text.pre-line {
  white-space: pre-line;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .text {
    &::selection {
      background-color: rgba(49, 122, 247, 0.2);
    }

    &::-moz-selection {
      background-color: rgba(49, 122, 247, 0.2);
    }
  }
}

